import React, { Component } from "react";
import axios from "axios";
import './Artist.scss'

export default class Artist extends Component {
  state = {
    artistInfo: {},
    performanceInfo: [],
    videoInfo: [],
    plug: false

  };

  componentDidMount() {

    // console.log(this.props);
    // let { id, celebrityId } = this.props.location.query;
    let { id, celebrityId } = this.props.match.params;

    axios
      .get(
        `https://show.maoyan.com/maoyansh/myshow/ajax/celebrityBasicInfo/query?ipId=${id}&sellChannel=13&cityId=1&lng=0&lat=0&token=KnM36IbIlT0V-q0DFmFiHMCcpdoAAAAAkgsAAIiz1a50lwCJ2LW9pvE81siHgg041vHKt-bXjNfj55VebbxNWlVYisyml8YbutxXxg`
      )
      .then((res) => {
        // console.log(res.data.data);
        this.setState({
          artistInfo: res.data.data,
        });
      });


    // 演出的请求
    axios
      .get(
        `https://show.maoyan.com/maoyansh/myshow/ajax/celebrityOtherProject/query?otherTourSort=0&celebrityId=${celebrityId}&sellChannel=13&cityId=1&lng=0&lat=0&token=KnM36IbIlT0V-q0DFmFiHMCcpdoAAAAAkgsAAIiz1a50lwCJ2LW9pvE81siHgg041vHKt-bXjNfj55VebbxNWlVYisyml8YbutxXxg`
      )
      .then((res) => {
        // console.log(res.data.data[0]);
        let result = res.data.data

        this.setState({

          performanceInfo: result,
        });




      });

    // 视频的请求
    axios
      .get(
        `https://show.maoyan.com/maoyansh/myshow/ajax/celebrityVideo/query?ipId=${id}&sellChannel=13&cityId=1&lng=0&lat=0&token=KnM36IbIlT0V-q0DFmFiHMCcpdoAAAAAkgsAAIiz1a50lwCJ2LW9pvE81siHgg041vHKt-bXjNfj55VebbxNWlVYisyml8YbutxXxg`
      )
      .then((res) => {
        // console.log(res.data.data);
        let result = res.data.data
        if (result.length > 0) {
          this.setState({
            plug: true,
            videoInfo: result,
          });
        }

      });

  }
  render() {
    return (
      <div className='artist'>
        {/* 明星信息开始 */}
        <div className="top" >
          <div className="content">
            <div className="content-top">
              <div className="left">
                <div className="img">
                  <img src={this.state.artistInfo.headUrl} alt="" />
                </div>
                <div className="name">
                  <span>{this.state.artistInfo.celebrityName}</span>

                </div>

              </div>
              <div className="right">
                <i className='iconfont icon-jiahao'></i>
                <span>关注</span>
              </div>
            </div>
            <div className="hint">

              <span>点击关注，不错过TA最新的演出消息哦~</span>
            </div>
            <div className="triangle"></div>
          </div>
        </div>
        {/* 明星信息结束 */}

        {/* 明星视频简介开始 */}
        <div className="main">
          <div className="project_wrap">
            <div className="title">{this.state.artistInfo.celebrityName}参加的演出</div>
            {
              this.state.performanceInfo.map(v => {
                return (
                  <div key={v.performanceId}>
                    <div className="serch-item">
                      <div className="item-img">
                        <img src={v.posterUrl} alt="" />
                      </div>
                      <div className="item-content">
                        <div className="title-left">{v.name}</div>
                        <div className="date">{v.showTimeRange}</div>
                        <div className="place">
                          <span>{v.cityName}</span>

                        </div>
                        <div className="price">
                          <div className="state">
                            <span className='state-left'>售票中</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                )
              })
            }

          </div>


          {
            this.state.plug ? <div className="video ">
              <div className="section_title">精彩现场回顾</div>
              {this.state.videoInfo.map(v => {
                return (
                  <div className="video-items" key={v.id}>

                    <div className="list">
                      <div className="item">
                        <div className="title">
                          <div>{v.videoName}</div>
                        </div>
                        <video src={v.videoUrl}></video>
                        <div className="user">
                          <div className="userImg">
                            <img src={v.userAvatar} alt="" />
                          </div>
                          <div className="username">
                            <span>{v.userName}</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                )
              })}
            </div> : <div></div>
          }

        </div>
        {/* 明星视频简介结束 */}



      </div>
    )
  }
}
